import React, { Component } from 'react';
import { Row, Col, Carousel, Card } from 'antd'

const windowHeight = window.innerHeight;
const windowWidth = window.innerWidth;

const styles = {
  homeDiv: {
    marginTop: 50,
    height: windowHeight,
  },
  carouselDiv: {
    marginTop: 10,
    height: 200,
    textAlign: 'center',
    lineHeight: 160,
    background: '#364d79',
    marginLeft: 10,
    marginRight: 10,
  },
  rightdiv: {
    float: 'right',
    display: 'inline',
    // width: windowWidth/2.85,
    // height: 100,
    // float: 'right',
    // marginRight: 10,
    // background: 'red',
    // marginTop: -100,
    // overflow: 'hidden',
  },
  card: {
    marginLeft: 10,
    marginTop: 10,
    height: 200,
    marginRight: 10,
  },
  cardRight: {
    height: 200,
    marginTop: 10,
    marginRight: 10,
  }
}

const tabList = [{
  key: 'tab1',
  tab: '最新',
}, {
  key: 'tab2',
  tab: '最热',
}];

const contentList = {
  tab1: <p>content1</p>,
  tab2: <p>content2</p>,
};

class Home extends Component {
  constructor(props){
    super(props);
    this.state = {
      key: 'tab1',
      noTitleKey: 'app',
    }
  }

  onTabChange = (key, type) => {
    console.log(key, type);
    this.setState({ [type]: key });
  }

  render() {
    return (
      <div style={styles.homeDiv}>
          <Row>
            <Col xs={24} sm={24} md={17} lg={15}>
              <div style={styles.carouselDiv}>
                <Carousel autoplay dots="false">
                  <div><h3>1</h3></div>
                  <div><h3>2</h3></div>
                  <div><h3>3</h3></div>
                  <div><h3>4</h3></div>
                </Carousel>
              </div>
            </Col>
            <Col xs={0} sm={0} md={7} lg={9}>
              <Card title="今日热点" style={styles.cardRight}>
                <p>Card content</p>
                <p>Card content</p>
                <p>Card content</p>
              </Card>
            </Col>
          </Row>
          <Row>
            <Col xs={24} sm={24} md={24} lg={24}>
              <Card
                style={styles.card}
                title="热门知识点资讯"
                tabList={tabList}
                onTabChange={(key) => { this.onTabChange(key, 'key'); }}
              >
                {contentList[this.state.key]}
              </Card>
            </Col>
          </Row> 
      </div>
    )
  }
}

export default Home;
